<template>
    <div style="height:100%;width:100%;" class="dataSearch">
        <bar class="bar" @on-back="$router.back()" title="加油信息详情"></bar>
        <group class="dataSearch-block">
            <cellBox>
                <div><img src="../../assets/logo1.png"
                          style="vertical-align: middle;height:35px;margin-right:10px;"/>油巴加油机管理平台
                </div>
            </cellBox>
        </group>
        <group>
            <form-preview header-label="消费金额" :header-value="'¥' + item.amount" :body-items="list" class="cell-form">
            </form-preview>
        </group>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import {mapMutations} from 'vuex'
    import VUEX_NAME from '../../store/constants.vue'
    import {
        Bar
    } from 'muka-ui'
    import {
        Group,
        CellBox,
        FormPreview
    } from 'vux'

    export default {
        name: 'detailOnly',
        components: {
            Bar,
            Group,
            CellBox,
            FormPreview
        },
        data: function () {
            return {
                list: [],
                item: [],
            }
        },
        created: function () {
            if (this.$route.query.type === 1) {
                this.item = this.orderList[this.$route.params.index]
            }
            else {
                this.item = this.mainOrderList[this.$route.params.index]
            }

            this.list = [{
                label: '订单号',
                value: this.item.orderId
            }, {
                label: '用户姓名',
                value: this.item.cardName
            }, {
                label: '加油机名称',
                value: this.item.tankerName
            }, {
                label: '油种',
                value: this.item.oilType
            }, {
                label: '型号',
                value: this.item.modelType
            }, {
                label: '消费金额(元)',
                value: this.item.amount
            }, {
                label: '加油量(L)',
                value: this.item.fuelCharge
            }, {
                label: '单价(元)',
                value: this.item.price
            }, {
                label: '订单生成时间',
                value: this.item.createTime
            }, {
                label: '订单完成时间',
                value: this.item.endTime
            }]
        },

        computed: mapState([
            VUEX_NAME.orderList,
            VUEX_NAME.mainOrderList,
        ]),
        methods: {
            ...mapMutations([
                VUEX_NAME.updateOrderList,
                VUEX_NAME.updateMainOrderList,
            ]),
        }

    }

</script>
